<div class="da-content-wrapper">
  <d-row [dGutter]="[12, 12]">
    <d-col [dSpan]="24">
      <div class="da-content-card">
        <div class="da-user-settings">
          <d-row [dGutter]="[0, 0]">
            <d-col [dSpan]="4">
              <div class="da-user-settings-sidebar">
                <ul class="da-user-settings-menu">
                  <li *ngFor="let item of menus" (click)="itemClickFn(item)" [ngClass]="{ 'da-item-active': item.isActive }">
                    {{ item.title }}
                  </li>
                </ul>
              </div>
            </d-col>
            <d-col [dSpan]="20">
              <div class="da-user-settings-content">
                <div *ngIf="menus[0].isActive">
                  <div class="da-settings-header">{{ menus[0].title }}</div>
                  <app-basic-setting></app-basic-setting>
                </div>

                <div *ngIf="menus[1].isActive">
                  <div class="da-settings-header">{{ menus[1].title }}</div>
                  <app-email-setting></app-email-setting>
                </div>
              </div>
            </d-col>
          </d-row>
        </div>
      </div>
    </d-col>
  </d-row>
</div>
